<template>
  <!-- 搜商机 -->
  <div class="my-order">
    <div class="sommer-index" v-if="!isSearch">
      <div class="search">
        <p class="title">欢迎使用搜商机功能！</p>
        <p class="subtitle">只需输入元器件型号，智能匹配引擎将自动推荐相关的询价信息 为您增加销售线索。</p>
        <div>
          <el-form :inline="true" ref="form" :rules="rules" :model="ruleForm">
            <el-form-item prop="partnumber" class="white-error">
              <el-input v-model="ruleForm.partnumber" @keyup.enter.native="handleQuery" clearable style="width: 360px"
                placeholder="请输入您的库存型号,搜索合作商机" size="meduim"></el-input>
              <el-button size="meduim" @click="handleQuery" type="primary" icon="el-icon-search">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div v-else>
      <el-card class="my-order-header">
        <div class="my-order-form">
          <el-form :inline="true" ref="form" :rules="rules" :model="ruleForm">
            <el-form-item label="" prop="partnumber" class="white-error">
              <el-input v-model="ruleForm.partnumber" @keyup.enter.native="handleQuery" clearable style="width: 360px"
                placeholder="请输入您的库存型号,搜索合作商机" size="small" @clear="handleReset"></el-input>
              <el-button size="small" @click="handleQuery" type="primary" icon="el-icon-search">查询</el-button>
              <!-- <el-button size="small" @click="handleReset">重置</el-button> -->
            </el-form-item>
          </el-form>
          <!-- <div style="width: 125px; white-space: nowrap">
          <el-button size="small" @click="handleQuery">查询</el-button>
          <el-button size="small" @click="handleReset">重置</el-button>
        </div> -->
        </div>
        <div class="my-order-footer">
          <!-- <div class="allTable">
        <div class="left">
          <div v-show="showHot" style="text-align: center;margin-bottom: 12px;">热搜型号</div>
          <el-table v-show="showHot" class="hot-table" v-loading="loading1" :data="hotTableData"
            :cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column label="询价热度" prop="num" min-width="80">
              <template slot-scope="{ row }">
                <template v-for="item in row.num">
                  <svg-icon icon-class="fire" :key="item" style="width: 24px; height: 24px" />
                </template>
              </template>
            </el-table-column>
            <el-table-column label="型号" prop="partnumber" min-width="120">
            </el-table-column>
            <el-table-column label="品牌" prop="brand" min-width="120">
            </el-table-column>
            <el-table-column label="数量" prop="quantity" min-width="120">
            </el-table-column>
            <el-table-column label="操作" prop="brand" min-width="120">
              <template v-slot="{row}">
                <el-button type="text" @click="handleNewQuto(row)">报价</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="right">
          <div v-show="showHot" style="text-align: center;margin-bottom: 12px;">实单求购</div>
          <el-table v-show="showHot" class="hot-table" v-loading="loading1" :data="hotTableData"
            :cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }"> -->
          <!-- <el-table-column label="询价热度" prop="num" min-width="80">
              <template slot-scope="{ row }">
                <template v-for="item in row.num">
                  <svg-icon icon-class="fire" :key="item" style="width: 24px; height: 24px" />
                </template>
              </template>
            </el-table-column> -->
          <!-- <el-table-column label="型号" prop="partnumber" min-width="120">
            </el-table-column>
            <el-table-column label="品牌" prop="brand" min-width="120">
            </el-table-column>
            <el-table-column label="数量" prop="quantity" min-width="120">
            </el-table-column>
            <el-table-column label="目标价" prop="quantity" min-width="120">
            </el-table-column>
            <el-table-column label="操作"  min-width="120">
              <template v-slot="{row}">
                <el-button type="text" @click="drawerVisibleNew = true">报价</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div> -->


          <el-table v-show="!showHot" :data="tableData" v-loading="loading2" v-adaptive="{ bottomOffset: 80 }"
            height="300px" style="width: 100%" border>
            <!-- <el-table-column :index="
          (index) => (ruleForm.page - 1) * ruleForm.pageSize + index + 1
        " type="index" width="50">
        </el-table-column> -->
            <el-table-column label="操作" min-width="80" align="center">
              <template slot-scope="{ row }">
                <el-button type="text" class="btn" @click="handleQuote(row)">
                  报价</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="inquiryOrderType" label="询价类型" min-width="100">
              <template v-slot="{ row }">
                <p v-if="row.inquiryOrderType == '' || row.inquiryOrderType == null || row.inquiryOrderType == 0">-</p>
                <span v-else>{{ row.inquiryOrderType }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="remainQuoteDuration"
                         label="剩余报价时间"
                         min-width="120">
          <template v-slot="{row}">
            <span style="color:#E02020"> {{0>=row.remainQuoteDuration*1?"已结束":(row.remainQuoteDuration|manageTime)}}</span>
          </template>
        </el-table-column> -->
            <el-table-column prop="partNumber" label="型号" min-width="150" show-overflow-tooltip>
              <template v-slot="{ row }">
                <p v-if="row.partNumber == '' || row.partNumber == null || row.partNumber == 0">-</p>
                <span v-else>{{ row.partNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="brand" label="品牌" min-width="120" show-overflow-tooltip>
              <template v-slot="{ row }">
                <p v-if="row.brand == '' || row.brand == null || row.brand == 0">-</p>
                <span v-else>{{ row.brand }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="quantity" label="数量" min-width="120">
              <template v-slot="{ row }">
                <p v-if="row.quantity == '' || row.quantity == null || row.quantity == 0">-</p>
                <span v-else>{{ row.quantity }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="dateCode" label="批次" min-width="120">
              <template v-slot="{ row }">
                <p v-if="row.dateCode == '' || row.dateCode == null || row.dateCode == 0">-</p>
                <span v-else>{{ row.dateCode }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="package" label="封装" min-width="120" show-overflow-tooltip>
              <template v-slot="{ row }">
                <p v-if="row.package == '' || row.package == null || row.package == 0">-</p>
                <span v-else>{{ row.package }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="unitPrice" label="接受价" min-width="120" align="right">
              <template v-slot="{ row }">
                <p v-if="row.unitPrice == null || row.unitPrice == ''">-</p>
                <span v-else style="color:#00AB2B ;">{{ Number.isInteger(row.unitPrice) ? row.unitPrice + '.00' :
                  row.unitPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="currency" label="币种" min-width="120">
              <template v-slot="{ row }">
                <p v-if="row.currency == '' || row.currency == null || row.currency == 0">-</p>
                <span v-else>{{ row.currency }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="deliveryDate" label="交货日期" min-width="120">
              <template v-slot="{ row }">
                <p v-if="row.deliveryDate == '' || row.deliveryDate == null || row.deliveryDate == 0">-</p>
                <span v-else>{{ row.deliveryDate }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="district" label="交货地" min-width="120">
              <template v-slot="{ row }">
                <p v-if="row.district == '' || row.district == null || row.district == 0">-</p>
                <span v-else> {{ row.district == "FArea01" ? "中国大陆" : "中国香港" }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="packing" label="包装" min-width="120">
              <template v-slot="{ row }">
                <p v-if="row.packing == '' || row.packing == null || row.packing == 0">-</p>
                <span v-else>{{ row.packing }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="id" label="询价单号" min-width="120">
              <template v-slot="{ row }">
                <p v-if="row.id == '' || row.id == null || row.id == 0">-</p>
                <span v-else>{{ row.id }}</span>
              </template>
            </el-table-column>
            <template slot="empty">
              <img src="@/assets/images/noneData.svg" alt="" class="nullDataImg" />
            </template>
          </el-table>
          <pagination v-show="!showHot" :page.sync="ruleForm.page" :total.sync="total" :limit.sync="ruleForm.pageSize"
            layout=" total,sizes,prev, pager, next, jumper" @pagination="doSearch"  v-if="total > 0"></pagination>
        </div>
      </el-card>
    </div>

    <!-- 热搜型号/实弹求购 -->
    <!-- <el-drawer title="" size="680px" :visible.sync="drawerVisibleNew" v-if="drawerVisibleNew">
      <div slot="title">
        <h3 style="color: #333;
                        font-weight: bold;
                        display:inline-block;
                        margin-right:20px">供应商报价</h3>
        询价单号：{{qutoData.id}}
      </div>
      <el-divider />
      <newQuto :qutoData='qutoData' :isActurl='qutoData.inquiryOrderType !== "普通询价"' :isSommer='true'
        @close='drawerVisibleNew = !drawerVisibleNew, handleQuery()' />
    </el-drawer> -->
    <!-- 搜索后的表格 -->
    <el-drawer title="" size="560px" :visible.sync="drawerVisible" v-if="drawerVisible">
      <div slot="title" class="drawer">
        <span class="title">供应商报价</span>
        <span class="inquiryID">询价单号：{{ qutoData.inquiryItemID }}</span>
        <!-- {{ qutoData.id }} -->
      </div>
      <quto :qutoData='qutoData' :isActurl='qutoData.inquiryOrderType !== "普通询价"' :isShowCheckbox="false" :isSommer='true'
        @close='drawerVisible = !drawerVisible, handleQuery()' />
    </el-drawer>
  </div>
</template>
<script>
import { getSearchList, SearchClaim } from "@/api/scsapi/index";

import newQuto from "../components/newQuto";
import quto from "../components/quto";
import Pagination from "@/components/Pagination";
export default {
  name: "SommerList",
  components: {
    Pagination,
    quto,
    newQuto
  },
  data() {
    return {
      isSearch: false,
      loading1: false,
      loading2: false,
      ruleForm: {
        partnumber: "",
        page: 1,
        pageSize: 20,
      },
      rules: {
        partnumber: [
          { required: true, trigger: "blur", message: "请输入查询型号" },
        ],
      },
      hotTableData: [],
      tableData: [],
      // 是否显示热门型号
      showHot: false,
      // 总数
      total: 0,
      drawerVisible: false,
      drawerVisibleNew: false,
      qutoData: {},
    };
  },
  mounted() {
    if (this.$route.query.value) {
      this.$set(this.ruleForm, "partnumber", this.$route.query.value);
      this.handleQuery();
    } else {
      this.handleQueryHot();
    }
  },
  methods: {
    // 获取热门数据
    handleQueryHot() {
      this.showHot = true;
      this.loading1 = true;
      setTimeout(() => {
        this.hotTableData = [
          {
            num: 4,
            partnumber: "IRLR3410TRPBF",
            brand: "Infineon",
            quantity: 100,
          },
          {
            num: 3,
            partnumber: "S9KEAZ64AMLH",
            brand: "Infineon(英飞凌)",
            quantity: 100,
          },
          {
            num: 3,
            partnumber: "IRLR3410TRPBF",
            brand: "NXP",
            quantity: 100,
          },
          {
            num: 4,
            partnumber: "ZZL-4116-36LD",
            brand: "NXP",
            quantity: 100,
          },
        ];
        this.loading1 = false;
      }, 1500);
    },
    // 获取数据
    handleQuery() {
      if (this.ruleForm.partnumber != '') {
        this.isSearch = true;
      } else {
        this.isSearch = false;
      }
      this.ruleForm.page = 1;
      this.doSearch();
    },
    // 获取数据
    doSearch() {
      this.tableData = [];
      this.$refs.form.validate().then((valid) => {
        if (valid) {
          this.showHot = false;
          this.loading2 = true;
          getSearchList(this.ruleForm)
            .then((res) => {
              if (res.status == 200) {
                this.tableData = res.data.rows;
                this.total = res.data.total;
              }
              this.loading2 = false;
            })
            .catch(() => {
              this.loading2 = false;
            });
        }
      });
    },
    // 重置
    handleReset() {
      this.$refs["form"].resetFields();
      this.showHot = true;
      this.isSearch = false;
      this.handleQueryHot();
      // this.$router.push({
      //   path: "/sommer",
      // });
    },
    // 报价
    handleQuote(row) {
      console.log('tagrow', row)
      this.drawerVisible = true;
      this.qutoData = {
        inquiryID: null,
        inquiryItemID: row.id,
        unitPrice: row.unitPrice,
        currency: row.currency == "人民币" ? "1" : "2",
        quantity: row.quantity,
        deliveryDate: row.deliveryDate,
        dateCode: row.dateCode,
        deliveryPlace: row.district,
        supplierID: null,
        supplierName: null,
        summary: null,
        partNumber: row.partNumber,
        brand: row.brand,
        package: row.package,
        packing: row.packing,
        remainQuoteDuration: null,
        inquiryOrderType: row.inquiryOrderType
      }

      // SearchClaim({
      //   inquiryID: null,
      //   inquiryItemID: row.id,
      //   unitPrice: row.unitPrice,
      //   currency: row.currency == "人民币" ? "1" : "2",
      //   quantity: row.quantity,
      //   deliveryDate: row.deliveryDate,
      //   dateCode: row.dateCode,
      //   deliveryPlace: row.district,
      //   supplierID: null,
      //   supplierName: null,
      //   summary: null,
      // })
      //   .then((res) => {
      //     if (res.status == 200) {
      //       let msg = this.$msgbox({
      //         title: "",
      //         message: "已收到您的申请，请等待采购确认后 进行报价",
      //         showCancelButton: true,
      //         confirmButtonText: "确定",
      //         cancelButtonText: "取消",
      //         cancelButtonClass: "cancelButtonClass",
      //         confirmButtonClass: "confirmButtonClass",
      //         customClass: "noname",
      //         center: true,
      //         dangerouslyUseHTMLString: true,
      //       });
      //       setTimeout(() => {
      //         this.$msgbox.close();
      //         this.handleQuery();
      //       }, 1500);
      //     }
      //   })
      //   .catch(() => { });
    },
    handleNewQuto(row) {
      console.log('tag', row)
      this.drawerVisibleNew = true;
      this.qutoData = {
        inquiryID: null,
        inquiryItemID: row.id,
        unitPrice: row.unitPrice,
        currency: row.currency == "人民币" ? "1" : "2",
        quantity: row.quantity,
        deliveryDate: row.deliveryDate,
        dateCode: row.dateCode,
        deliveryPlace: row.district,
        supplierID: null,
        supplierName: null,
        summary: null,
        remainQuoteDuration: null
      }
    }
  },
};
</script>
<style scoped lang="scss" src="@/assets/styles/public.scss"></style>
<style lang="scss" scoped>
::v-deep .el-divider--horizontal {
  margin: 0 0 !important;
  width: 95%;
  padding-left: 20px !important;
  margin-left: 20px !important;
}

::v-deep .el-table .cell {
  padding-right: 4px !important;
}

.my-order {
  // margin: 0 14px;

  .sommer-index {
    // margin-top: 19px;
    background-image: url("../../../assets/images/sommer_bg.png");
    background-size: 100% 120%;
    min-height: calc(100vh - 70px);
    position: relative;

    .search {
      position: absolute;
      margin: 210px 0 0 66px;

      .title {
        font-size: 32px;
        font-weight: 500;
        margin-bottom: 20px;
      }

      .subtitle {
        width: 504px;
        margin-bottom: 20px;
        font-size: 18px;
        line-height: 34px;
        color: #666;
      }

      .el-button--small {
        font-size: 12px;
      }
    }
  }

  .my-order-header {
    .my-order-form {
      background: url("../../../assets/images/sommer_searchbg.png") no-repeat;
      background-size: 100% 100%;
    }

  }

  .my-order-footer {
    margin-top: 20px;

    .allTable {
      display: flex;

      .left {
        width: 50%;
        margin-right: 20px;
      }

      .right {
        width: 50%;
      }
    }
  }

  .my-order-form {
    padding: 15px;
    border-radius: 5px;
    // display: flex;
    // justify-content: space-between;
    // margin-top: 10px;
    text-align: center;

    .el-button--small {
      font-size: 12px;
    }

    .el-form-item {
      margin-bottom: 0 !important;
      margin-right: 30px;
    }

    ::v-deep .el-form-item__label {
      color: #fff;
    }
  }
}

::v-deep .el-drawer__header {
  align-items: baseline;

  // margin-bottom: 0px !important;
  .drawer {
    .title {
      color: #1A2035;
      font-weight: 600;
      margin-right: 10px;
      font-size: 14px;
    }

    .inquiryID {
      font-size: 14px;
      color: #333;
      font-weight: 400;
    }
  }
}

.hot-table {
  min-height: 320px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 50px;
}

.el-form {
  .el-form-item {
    ::v-deep.el-input__inner{
        border-radius: 2px 0 0 2px;
      }
  }
  .el-button--primary{
    border-radius: 0 2px 2px 0;
  }
}

::v-deep .white-error .el-form-item__error {
  color: #ff4949;
}
::v-deep.el-table tbody .cell {
  height: 32px !important;
  line-height: 32px !important;

  p {
    margin: 0 !important;
  }
}
</style>












